<template>
	<div class="cate">
		<Nav activeIndex="cateView"></Nav>
		<section class="container content overflow">
			<div class="catelist">
				<el-tag v-for="item in listData" :key="item.id" type="success" :effect="cateid == item.id?'dark':'plain'" @click="clickEvent(item)">
					{{ item.category }}
				</el-tag>
			</div>

			<List activeIndex="cateView" :cateid="cateid"></List>
		</section>
		<Footer></Footer>
	</div>
</template>
<script>
	import Nav from '../components/Nav.vue'
	import List from '../components/List.vue'
	import Footer from '../components/Footer.vue'
	import {
		mapState
	} from "vuex"
	export default {
		name: 'cateView',
		data() {
			return {
				listData: [],
				cateid: ""
			}
		},
		components: {
			Nav,
			List,
			Footer
		},
		computed: {
			...mapState(['userinfo'])
		},
		methods: {
			async getData() {
				let {
					data
				} = await this.$axios.get(
					'/blog/users/usercatelist?userid=' +
					this
					.userinfo
					.id);
				data.data.List.unshift({
					id: "",
					category: "全部"
				})
				this.listData = data.data.List;
			},
			clickEvent(item) {
				console.log(item);
				this.cateid = item.id;
			}
		},
		mounted() {
			this.getData();
		}
	}
</script>

<style lang="less" scoped>
	.cate {
		height: 100%;

		.container {
			max-width: 1200px;
			min-height: 827px;
			margin: 0 auto 10px;

			.catelist {
				display: flex;
				margin: 20px;
				flex-direction: row;
				justify-content: left;
				flex-wrap: wrap;
				align-items: center;

				.el-tag {
					margin-right: 20px;
				}

			}
		}

		.content {

			h2,
			h3 {
				font-size: 150%;
				margin: 20px 0;
			}

			p {
				color: #555;
				line-height: 30px;
				letter-spacing: 2px;
			}
		}
	}
</style>